<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>position demo</title>
  <style>
   body{ margin:0; padding:40px; background:#fff; font:80% Arial; color:#555; line-height:180%;}
    p{ clear:both; margin:0; padding:.5em 0;}
    #tooltip{position:absolute; border:1px solid #333; background:#f7f5d1; padding:1px; color:#333; display:none;}
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
    <p><a href="#" class="tooltip" title="这是我的超链接提示1.">提示1.</a></p>
    <p><a href="#" class="tooltip" title="这是我的超链接提示2.">提示2.</a></p>
    <p><a href="#" title="这是自带的提示1.">自带提示1.</a></p>
    <p><a href="#" title="这是自带的提示2.">自带提示2.</a></p>
<script>
var x = 20;
var y = 20;
$("a.tooltip").mouseover(function(e){
  this.myTitle = this.title;
  this.title = "";
  var tooltip = "<div id='tooltip'>"+this.myTitle+"</div>";
  $("body").append(tooltip);
  $("#tooltip").css({
    "top":(e.pageY+y)+"px",
    "left":(e.pageX+x)+"px"})
  .show("fase");
}).mouseout(function(e){
  this.title = this.myTitle;
  $("#tooltip").remove();
}).mousemove(function(e){
  $("#tooltip").css({
    "top":(e.pageY+y)+"px",
    "left":(e.pageX+x)+"px"
  });
});
</script>
</body>
</html>